<template>
  <div class="mask">
    <transition
    enter-active-class="animated fadeInowm"
    >
    <div class="modal-content" v-if="visible"></div>
    <TempComponrnt @close='close' @success='successCallback' :params='params'></TempComponrnt>
    </transition>
  </div>
</template>

<script>
export default {
  name: "w-modal",
  components: {
    TempComponrnt: null,
  },
  data() {
    return {
      visible: false,
    };
  },
props:{
  template:null,
  params:Object,
  fail:Function,
  success:Function
},
  mounted() {
    this.createElement();
  },

  methods: {
    createElement() {
      this.visible = true;
      document.body.appendChild(this.$el);
    },
    close(){
        this.visible=false;
    },
    destroyElement(){
        this.$destroy()
    },
    successCallback(data){
      this.success(data)
    }
  },
  beforeDestroy(){
      this.$el.parentNode.removeChild(this.$el)
  },
  watch:{
     visible(newValue){
         if(!newValue){
             this.$el.addEventListener('animationend',this.destroyElement,false)
         }
     } 
  }
};
</script>

<style scoped>
@import "./modal.css";
</style>